<template>
    <div id="home">
        <div id="home-container">
            <div id="left">
                <img id="homeimg" :src="homeimg" />
            </div>
            <div id="right">
                <div
                    class="module-item"
                    v-for="item in modulesList"
                    :key="item.index"
                >
                    <router-link :to="modules.includes(item.name)?item.path:''">
                        <el-button
                            :body-style="{
                                padding: '0px',
                                cursor: 'pointer',
                                height: '100%'
                            }"
                            :disabled="!modules.includes(item.name)"
                            style="width: 100%"
                            :style="{background: item.color}"
                            :shadow="'hover'"
                            class="modulecard"
                        >
                            <div class="card-content">
                                <span class="module-title">{{
                                    item.name
                                }}</span>
                                <span class="getin_button">进入>></span>
                            </div>
                        </el-button>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import homepageImg from "@/assets/img/homepage-img.png";

export default {
    name: "Home",
    data() {
        return {
            homeimg: homepageImg,
            modulesList: [
                {
                    path: "/global_deterministic",
                    name: "全球确定性预报检验模块",
                    color: '#1E90FF',
                },
                {
                    path: "/grapes_region_determ",
                    name: "GRAPES 高分辨率确定性预报模式检验模块",
                    color: '#87CEFA',
                },
                {
                    path: "/grapes_reps",
                    name: "GRAPES 区域集合预报检验模块",
                    color: '#48D1CC',
                },
                // {
                //     path: "/ADdashboard",
                //     name: "精细化 小尺度 大气扩散模式系统",
                //     color: '#48D1CC',
                // },
            ],
            modules: null,
        };
    },
    created() {
        this.modules = localStorage.getItem('modules');

        // 移除'全球确定性预报检验模块'的权限
        this.modules = this.modules.replace('全球确定性预报检验模块', '');
    }
};
</script>

<style lang="scss" scoped>


#home {
    background-color: #f4f7fd;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    #home-container {
        width: 85%;
        max-width: 1300px;
        height: 480px;
        display: flex;

        #left {
            width: 50%;
            display: flex;
            align-items: center;
            #homeimg {
                display: inline-block;
                width: 100%;
                max-width: 550px;
                min-width: 360px;
                margin-right: 10px;

            }
            @media screen and (max-width: 960px) {
                display: none;
            }
        }

        #right {
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            transition: all ease 0.3s;

            @media screen and (max-width: 960px) {
                width: 100%;
            }

            .module-item{
                // flex: 1 1 0;
                height: 25%;
                min-height: 110px;

                .modulecard {
                    height: 100%;
                    border-radius: 8px;

                    &:hover {
                        box-shadow: 0 2px 20px 0 rgba(0,0,0,.3);
                    }
                    .card-content {
                        padding: 24px 24px 18px 24px;
                        height: 100%;
                        // min-height: 120px;
                        box-sizing: border-box;
                        display: flex;
                        justify-content: space-between;
                        color: #ffffff;

                        .module-title {
                            // padding: 15px 10px;
                            font-weight: 600;
                            font-size: 24px;
                        }
                        .getin_button {
                            align-self: flex-end;
                            flex-shrink: 0;
                            padding: 0 10px;
                        }
                    }
                }
            }
        }
    }
}
</style>